<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>倒计时</title>
	<style type="text/css">

		*{
			padding:0;
			margin: 0;
			font-size: 20px;
		}
		li{
			list-style: none;
			background: #C71C60;
	        color: #fff;
	        font-size: 16px;
	        font-family: Arial;
	        padding: 0 10px;
	        margin:0 5px;
	        border-radius: 5px;
	        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
		}
		.start,.end{
			display:flex;
			flex-direction: row;
			width: 600px;
			height: 40px;
			line-height:40px;
			margin: 10px 0;
			color: #C71C60;
		}
		h3{
			font-weight: 400;
			font-size: 20px;
			color: #C71C60;
		}
	</style>
</head>
<body>
	 <ul class="start">
	 	<h3>距离活动开始还有：</h3>
	 	<li></li> 
	 	<li></li>
	 	<li></li> 
	 	<li></li>
 	</ul>
	 <ul class="end">
	 	<h3>距离活动结束还有：</h3>
	 	<li></li> 
	 	<li></li> 
	 	<li></li> 
	 	<li></li>
	 </ul>
</body>
<script src='jquery-1.11.3.min.js'></script>
<script type="text/javascript">
	
	window.onload=function(){
		var timer=setInterval(function(){
			showTime();
		},1000)
	}
	


	function showTime(){
		var nowTime=new Date(),//当前时间
			startTime=new Date("2018/09/9 22:20:00"),//开始时间
			endTime=new Date("2018/09/12 08:00:00"),//结束时间
			toStart=startTime.getTime()-nowTime.getTime(),
			toEnd=endTime.getTime()-nowTime.getTime();
			if(getTimerString(toStart)!="时间到"){
				var startArr=getTimerString(toStart).split('/');
				getCon(startArr,$('.start>li'));	
			}else{
				$('.start').html('时间到').remove('li');
			}
			
			if(getTimerString(toEnd)!="时间到"){
				var endArr=getTimerString(toEnd).split('/');
				getCon(endArr,$('.end>li'));
			}else{
				$('.end').html('时间到').remove('li');
			}
	}

	 function getTimerString(time){    
        var d = Math.floor(time / 86400000),
            h = Math.floor((time % 86400000) / 3600000),     
            m = Math.floor(((time % 86400000) % 3600000) / 60000),     
            s = Math.floor(((time % 86400000) % 3600000 % 60000) / 1000);
            d=d>=10? d:"0"+d;
            h=h>=10? h:"0"+h;
            m=m>=10? m:"0"+m;
            s=s>=10? s:"0"+s;
        if (time>0)     
            return d + "天" +"/"+ h + "小时"+"/" + m + "分"+"/" + s + "秒";       
        else return "时间到";                
    }

    function getCon(arr,el){
    	arr.forEach((val,ind)=>{
    		el[ind].innerHTML=val;
    	})
    } 
</script>
</html>